<template>
  <div class="articlesItem">
    <!-- 一条文章单元格 -->
    <van-cell>
      <!-- 标题区域的插槽 -->
      <template #title>
        <div v-if="item.cover.type > 1">
          <div class="title-box">
            <!-- 标题 -->
            <span>{{ item.title }}</span>
          </div>
          <div class="imgs">
            <img
              class="van_img"
              v-for="(i, index) in item.cover.images"
              v-lazy="i"
              :key="index"
            />
          </div>
        </div>
        <div class="imgs" v-if="item.cover.type === 1 || item.cover.type === 0">
          <div class="title-box1">
            <!-- 标题 -->
            <span class="title">{{ item.title }}</span>
            <img
              v-for="(i, index) in item.cover.images"
              v-lazy="i"
              :key="index"
              class="van_img"
            />
          </div>
        </div>
      </template>

      <!-- label 区域的插槽 -->
      <template #label>
        <div class="label-box">
          <div>
            <span>作者 {{ item.aut_name }}</span>
            <span>{{ item.comm_count }} 评论</span>
            <span>{{ $moment(item.pubdate, 'YYYYMMDD').fromNow() }}</span>
          </div>
          <!-- 反馈按钮 -->
          <van-icon
            name="cross"
            @click.stop="show = true"
            class="cross"
            v-if="showcross"
          />
        </div>
      </template>
    </van-cell>
    <van-action-sheet
      v-model="show"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @select="onSelect"
      get-container="body"
      class="toast"
    />
    <van-action-sheet
      v-model="show1"
      :actions="actions1"
      cancel-text="返回"
      close-on-click-action
      @select="onSelect1"
      get-container="body"
      class="toast"
      @cancel="onCancel"
      duration="0"
    />
  </div>
</template>

<script>
import { notInterestedIn, reports } from '../../api/articles'
import { Toast } from 'vant'
export default {
  // 组件名称
  name: 'articlesItem',
  // 组件参数 接收来自父组件的数据
  props: {
    item: {
      type: Object,
      default () {
        return {}
      }
    },
    // 控制叉号是否显示
    showcross: {
      type: Boolean,
      default () {
        return true
      }
    }
  },
  // 局部注册的组件
  components: {},
  // 组件状态值
  data () {
    return {
      show: false,
      show1: false,
      actions: [{ name: '不感兴趣' }, { name: '反馈垃圾内容' }],
      actions1: [{ name: '其他问题', id: 0 }, { name: '标题夸张', id: 1 }, { name: '低俗情色', id: 2 },
      { name: '错别字多', id: 3 }, { name: '旧闻重复', id: 4 }, { name: '内容不实', id: 6 },
      { name: '侵权', id: 8 }, { name: '广告钦文', id: 5 }, { name: '涉嫌违法犯罪', id: 7 }]
    }
  },
  methods: {
    async onSelect (item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false
      if (item.name == '不感兴趣') {
        await notInterestedIn(this.item.art_id)
        Toast('反馈成功')
        this.$emit('delete', this.item.art_id)
      } else if (item.name == '反馈垃圾内容') {
        this.show1 = true
      }
    },
    async onSelect1 (item) {
      await reports(this.item.art_id, item.id, 0)
      Toast('举报成功')
    },
    onCancel () {
      this.show = true
    },
    getContainer () {
      return document.querySelector('.my-container')
    }
  }
}
</script>
<style scoped lang="less">
.art_title {
  font-size: 12px;
}
/* 标题样式 */
.title-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* label描述样式 */
.label-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title-box1 {
  display: flex;
  justify-content: space-between;
}
/* 文章信息span */
.label-box span {
  margin: 0 3px;
  &:first-child {
    margin-left: 0;
  }
}
.imgs {
  display: flex;
}
.title {
  width: 235px;
}
.cross {
  position: absolute;
  right: 5px;
  bottom: 10px;
  font-size: 16px;
}
.van_img {
  width: 3.125rem;
  height: 2.167rem;
}
</style>
